<template>
	<view>
		<navbar title="活动信息" :immersive="false" :background="navbackg" :titleColor="'#fff'"></navbar>

		<view class="OuterBox">

			<view class="data_val activItem FlexAlign" v-if="detailinfo.goods_snap">
				<view class="img_box">
					<image :src="$getImageUri(detailinfo.goods_snap.goods_image)" mode="widthFix"></image>
				</view>
				<view class="info_box FlexItem">
					<view class="title Singlerow">
						{{detailinfo.goods_snap.goods_name || ''}}
					</view>
					<!-- <view class="specif Singlerow">
						默认
					</view> -->
					<view class="price Singlerow">
						￥{{detailinfo.goods_snap.sell_price || ''}}
					</view>
				</view>

				<view class="particbtn FlexRow" @click="toShare" v-if="detailinfo.join_info">
					<u-icon name="share-fill" color="#fff" size="28"></u-icon>
					<view class="txt">{{$zhTran('去分享')}}</view>
				</view>
			</view>

			<view class="data_val detailContent">

				<view class="content_nav " :class="{'style2': navindex == 1}">
					<div class="navchild FlexBetween">
						<view class="nav_val FlexItem FlexColumn " @click="navindex = 0"
							:class="{'isActive': navindex == 0}">
							{{$zhTran('活动信息')}}
						</view>
						<view class="nav_val FlexItem FlexColumn" @click="navindex = 1"
							:class="{'isActive': navindex == 1}">
							{{$zhTran('关联订单')}}
						</view>
					</div>

				</view>
				<view class="content_area" v-show="navindex == 0">
					<activeinfo :info="detailinfo"></activeinfo>
				</view>
				<view class="content_area" v-show="navindex == 1">
					<template v-if="detailinfo.join_info">
						<orderinfo :rrl_id="detailinfo.join_info.id"></orderinfo>
					</template>

				</view>

			</view>

		</view>

	</view>
</template>

<script>
	import activeinfo from "./components/activeinfo.vue";
	import orderinfo from "./components/orderinfo.vue";
	import {
		apiactivitydetail,
	} from '@/api/rebate'

	export default {
		name: 'activdetail',
		props: {

		},
		components: {
			activeinfo,
			orderinfo,
		},
		watch: {

		},
		onLoad(options) {
			console.log(options, 'options')
			this.rra_id = options.id || ''
			if (this.rra_id) {
				this.getDetails()
			}

		},
		methods: {
			getDetails() {

				apiactivitydetail({
						rra_id: this.rra_id,
					})
					.then((data) => {
						this.detailinfo = this.$zhTran(data)
					})
					.catch((err) => {
						console.log(err);
					});

			},
			toShare() {
				if (this.detailinfo) {
					let id = this.detailinfo.goods_snap ? this.detailinfo.goods_snap.id : ''
					uni.navigateTo({
						url: `/bundle2/pages/goods_detail/goods_detail?id=${id}`
					})
				}
			},

		},
		data() {
			return {
				detailinfo: '',
				rra_id: '',
				navindex: 0,
				navbackg: {
					'background': 'rgba(64, 115, 250, 1)'
				},
			}
		},
	}
</script>

<style lang="scss" scoped>
	.activItem {
		width: 100%;
		position: relative;
		padding: 36rpx;

		.img_box {
			width: 138rpx;
			height: 138rpx;
			border-radius: 4rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.info_box {
			height: 100%;
			margin: 0 24rpx;

			.title {
				max-width: 448rpx;
				font-size: 28rpx;
				font-weight: 550;
				color: rgba(56, 56, 56, 1);
				text-align: left;
				vertical-align: top;
				line-height: 34rpx;
			}

			.specif {
				max-width: 448rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: rgba(166, 166, 166, 1);
				text-align: left;
				vertical-align: top;
				margin: 16rpx 0 30rpx 0;
			}

			.price {
				margin-top: 30rpx;
				max-width: 290rpx;
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
				text-align: left;
				vertical-align: top;

			}
		}

		.particbtn {
			position: absolute;
			right: 0;
			bottom: 24rpx;
			width: 156rpx;
			height: 60rpx;
			border-radius: 200px 0px 0px 200px;
			background: linear-gradient(90deg, rgba(255, 88, 51, 1) 0%, rgba(238, 14, 38, 1) 100%);


			.txt {
				font-size: 26rpx;
				font-weight: 550;
				color: rgba(255, 255, 255, 1);
				text-align: left;
				vertical-align: top;
				margin-left: 16rpx;
			}

		}
	}


	.detailContent {
		background: none;
		// padding: 36rpx;
		border-radius: 14rpx;
		overflow: hidden;

		.content_nav.style2 {
			border-radius: 0 0 14rpx 14rpx;

			.navchild {
				border-bottom: none;
			}
		}

		.content_nav {
			background: #fff;
			padding: 0 36rpx;
			width: 100%;

			.navchild {
				height: 86rpx;
				width: 100%;
				border-bottom: solid 2rpx rgba(240, 240, 240, 1);
			}

			.nav_val {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(56, 56, 56, 1);
				text-align: center;
				vertical-align: top;
				position: relative;
				height: 100%;
			}

			.nav_val.isActive {
				color: rgba(64, 115, 250, 1);
			}

			.nav_val.isActive::after {
				content: '';
				display: block;
				position: absolute;
				bottom: 0;
				width: 60rpx;
				height: 4rpx;
				background: rgba(64, 115, 250, 1);

			}
		}
	}

	.content_area {
		width: 100%;
		// padding: 50rpx 0 ;
		// border:solid 1px red;
	}
</style>